<!-- 普通帖详情页 -->
<!-- 小旗子 2020/8/20日更新-->
<!-- 小旗子 2020/8/24日更新
			1.添加按热度排序等的排序选择
			2.给评论组件传值-->
<!-- 8.29
			1.获取评论数据-->
<!-- 8.30
			1.获取帖子数据-->
<!-- 8.31
			1.更新不刷新添加删除评论功能-->
<!-- 9.2
			1.修改评论组件传参
			2.修改请求逻辑-->
<!-- 9.5 -->
<!-- 		1.添加加载时的遮罩层 
			2.获取postId-->
<!-- 9.6
			1.将postId改为数字类型
			2.给评论加view框使显示完全-->
<!-- 9.8 小瓜子 -->
<!-- 	1.修复贴主看不见私密评论bug 
	    2.修复评论无刷新增删后不改变无评论状态bug -->
<template>
	<view>
		<!-- 加载时的页面 -->
		<view class="loading" v-if="isLoading" :style="'height:' + loadingHeight + 'px;width: 100%;'">
			<text :style="'display: block; width: 100%; height: 100%; line-height: ' + loadingHeight + 'px; text-align: center; color:#999'">加载中...</text>
		</view>
		<ErrorPage v-if='err' @reloadPage='reloadPage'></ErrorPage>
		<view class="posting" v-if="!isLoading && !err">
			<PostingSummary v-for='(item,index) in normalList' :key="index" :datas="item" :isNav="true"></PostingSummary>
			<view class="sorting">
				<text class="hot">{{sortingMode ? '热门评论' : '最新评论'}}</text>
				<text class="inxupt inxupttubiao2" @tap="swichMode" style="font-size: 24rpx;">{{sortingMode ? '按热度' : '按时间'}}</text>
			</view>

			<view class="noComment" v-if="noComment">
				<text>现在还没有评论，快来占沙发！！</text>
			</view>

			<!-- 评论详情组件 -->
			<view class="commentBox">
				<CommentBox :postId="postId" v-if="!item.privately || normalList[0].authorId == userId || item.authorId == userId" v-for="(item,index) in commentList"
				 :key="index" :datas="item"></CommentBox>
			</view>
			<view class="exComment"></view>
			<!-- 写评论组件 -->
			<CommentEdit :postId="postId" :replyUserId="normalList[0].authorId" @insertComment='insertComment'></CommentEdit>
			<view class="bottom_box"></view>
		</view>
	</view>
</template>

<script>
	import ErrorPage from "../../components/ErrorPage.vue"
	import CommentBox from '../../components/postDetail/CommentBox.vue'
	import CommentEdit from '../../components/postDetail/CommentEdit.vue'
	import PostingSummary from '../../components/summary/PostingsSummary.vue'
	import { _ajax } from '../../in-xupt-functions.js'
	export default {
		components: {
			CommentBox,
			CommentEdit,
			PostingSummary,
			ErrorPage
		},
		data() {
			return {
				loadingHeight: 0, // 遮罩层高度
				isLoading: true, // 是否处于加载状态
				option: {},
				community: {},
				normalList: [], //帖子数组
				sortingMode: 1, //  排序方式
				commentList: [], // 评论数组
				userId: undefined,
				flag: false,
				postId: undefined,
				noComment: false,
				err: false
			}
		},
		//下拉刷新
		onPullDownRefresh() {
		    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();  //停止下拉刷新动画
		    }, 1000);
		},
		onLoad(option) {
			if (option.postId) {
				this.postId = option.postId * 1
			}else {
				this.postId = undefined
			}
			// 得到屏幕高度，并将这个值设置为加载遮罩层的高度
			uni.getSystemInfo({
				success: (data) => {
					this.loadingHeight = data.windowHeight;
				}
			})
			this.initData()
		},
		mounted: function(option) {
			// 不用刷新就可以删除评论
			uni.$on('deleteComment', res => {
				if (res.rootId == 0) {
					this.commentList.splice(this.commentList.findIndex(item => item.commentId === res.commentId), 1)
				} else {
					let index = this.commentList.findIndex(item => item.commentId === res.rootId)
					this.commentList[index].subComments.splice(this.commentList[index].subComments.findIndex(item => item.commentId === res.commentId), 1)
					this.commentList[index].subCommentNum = this.commentList[index].subComments.length
					
				}
				if(this.commentList.length == 0) {
					this.noComment = true
				}
				this.normalList[0].commentNum--;
			})
			// 判断私密 获取用户Id
			this.userId = uni.getStorageSync('userId');
			//判断跳转
			if(this.postId){
				this.isNav = false
			}
		},

		methods: {
			reloadPage: function () {
				this.err = false;
				this.isLoading = true;
				this.initData()
			},
			initData: function () {
				// 加载中的动画
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				// 请求帖子数据
				_ajax({
						url: '/post/' + this.postId,
						method: 'GET',
					})
					.then(res => {
						if(res.data.status == 0) {
							this.normalList[0] = res.data.data
							// 请求评论数据
							return _ajax({
									url: '/post/' + this.postId + '/comments',
									method: 'GET',
								})
						}else {
							uni.showToast({
								duration:2000,
								title: res.data.msg,
								icon:'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
					})
					.then(res => {
						this.commentList = res.data.data
						if (this.commentList.length == 0) {
							this.noComment = true;
						}
						// 加载结束隐藏动画
						if (res.data.status == 0) {
							this.isLoading = false;
							uni.hideLoading()
						}else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							this.err = true
						}
					})
					.catch(err => {
						this.isLoading = false
						this.err = true
					})
			},
			swichMode: function() {
				this.sortingMode = !this.sortingMode
				this.commentList = [];
				uni.showLoading({
					title: '加载中'
				})
				_ajax({
						url: '/post/' + this.postId + '/comments?sortedBy=' + (this.sortingMode ? '2' : '1'),
						method: 'GET',
					})
					.then(res => {
						console.log(res)
						this.commentList = res.data.data
							//判断无评论
							if (this.commentList.length == 0) {
								this.noComment = true;
							}
							// 加载结束隐藏动画
							if (res.data.status == 0) {
								this.isLoading = false;
								uni.hideLoading()
								this.err = false
							}else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								this.err = true
							}
						})
						.catch(err => {
							console.log(err)
							uni.hideLoading();
							uni.showToast({
								title: '请求超时',
								icon: 'none'
							})
						})
			},
			//不刷新添加评论
			insertComment: function(resData) {
				if (resData.rootId) {
					this.commentList.forEach(item => {
						if (item.commentId == resData.rootId) {
							item.subComments.push(resData)
							item.subCommentNum = item.subComments.length
						}
					})
				} else {
					this.commentList.push(resData)
				}
				if(this.commentList.length != 0) {
					this.noComment = false;
				}
				this.normalList[0].commentNum++;
			},
		},
	}
</script>

<style lang="less">
	.posting {
		.exComment{
			width: 750rpx;
			height: 100rpx;
		}
		.noComment {
			width: 750rpx;
			height: 200rpx;
			padding-top: 200rpx;
			display: inline-block;
			font-size: 28rpx;
			display: flex;
			vertical-align: center;
			justify-content: center;

			text {
				color: #7f7f7f;
			}
		}

		.sorting {
			margin-top: 10rpx;
			background-color: white;
			padding-right: 20rpx;
			line-height: 40rpx;
			text-align: right;

			.hot {
				margin-left: 20rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				float: left;
			}

		}
		.bottom_box {
			position: fixed;
			bottom: 0;
			height: 10px;
			width: 100%;
		}
	}
</style>
